<template>
  <el-dialog v-model="addOrEditVisible" title="代理机制" :before-close="closeEditDialog"
             width="50%">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" class="demo-ruleForm"
             :size="formSize" status-icon>
      <!--      <el-row>-->
      <!--        <el-col :span="24">-->
      <!--          <el-form-item label="ID" prop="id">-->
      <!--            <el-input v-model="ruleForm.id"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->

      <el-descriptions title="基本信息" :column="1" border>
        <el-descriptions-item label="代理等级名称" >
          <!--          <el-input v-model="ruleForm.proxyLevelTitle"/>-->
          <el-select v-model="ruleForm.proxyLevelTitle" placeholder="请选择状态" clearable="true" style="width:160px">
            <el-option v-for="(item,index) in categoryList" :label="item.categoryName" :value=item.id></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="代理费" >
          <el-input v-model="ruleForm.proxyMoney"/>
        </el-descriptions-item>
        <el-descriptions-item label="保证金（%）" >
          <el-input v-model="ruleForm.bailMoeny"/>
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions title="返现设置" :column="1" border>
        <el-descriptions-item label="季度返现2000(%)" >
          <el-input v-model="ruleForm.kf3Money"/>
        </el-descriptions-item>
        <el-descriptions-item label="半年度返现3800(%)" >
          <el-input v-model="ruleForm.kf6Money"/>
        </el-descriptions-item>
        <el-descriptions-item label="年度返现6800(%)" >
          <el-input v-model="ruleForm.kf12Money"/>
        </el-descriptions-item>
      </el-descriptions>

<!--      普通代理和标准代理-->
      <el-descriptions v-if="!ruleForm.proxyLevelTitle||ruleForm.proxyLevelTitle==1 || ruleForm.proxyLevelTitle==2" title="推荐奖励" :column="1" border>
        <el-descriptions-item label="推荐普通代理奖励" >
          <template #label>
            推荐普通代理奖励
          </template>
          0万
        </el-descriptions-item>
        <el-descriptions-item label="推荐标准代理奖励" >
          <template #label>
            推荐标准代理奖励
          </template>
          2万
        </el-descriptions-item>
        <el-descriptions-item label="推荐高级代理奖励" >
          <template #label>
            推荐高级代理奖励
          </template>
          3万
        </el-descriptions-item>
        <el-descriptions-item label="推荐至尊代理奖励" >
          <template #label>
            推荐至尊代理奖励
          </template>
          8万
        </el-descriptions-item>

        <el-descriptions-item label="代理晋级" >
          <template #label>
            <span style="font-weight: bold; ">代理晋级</span>
          </template>
          <template v-if="!ruleForm.proxyLevelTitle||ruleForm.proxyLevelTitle==1">
            推荐3个普通代理晋升标准代理
          </template>
          <template v-if="ruleForm.proxyLevelTitle==2">
            推荐3个标准代理晋升高级代理
          </template>
        </el-descriptions-item>
      </el-descriptions>

<!--      高级代理-->
      <el-descriptions v-if="ruleForm.proxyLevelTitle==3" title="推荐奖励" :column="1" border>
        <el-descriptions-item label="推荐普通代理奖励" >
          <template #label>
            推荐普通代理奖励
          </template>
          0万
        </el-descriptions-item>
        <el-descriptions-item label="推荐标准代理奖励" >
          <template #label>
            推荐标准代理奖励
          </template>
          2万 + 标准代理的10%
        </el-descriptions-item>
        <el-descriptions-item label="推荐高级代理奖励" >
          <template #label>
            推荐高级代理奖励
          </template>
          3万
        </el-descriptions-item>
        <el-descriptions-item label="推荐至尊代理奖励" >
          <template #label>
            推荐至尊代理奖励
          </template>
          8万
        </el-descriptions-item>

        <el-descriptions-item label="代理晋级" >
          <template #label>
            <span style="font-weight: bold; ">代理晋级</span>
          </template>
          推荐3个高级代理晋升至尊代理
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions v-if="ruleForm.proxyLevelTitle==4" title="推荐奖励" :column="1" border>
        <el-descriptions-item label="推荐普通代理奖励" >
          <template #label>
            推荐普通代理奖励
          </template>
          0万
        </el-descriptions-item>
        <el-descriptions-item label="推荐标准代理奖励" >
          <template #label>
            推荐标准代理奖励
          </template>
          2万 + 标准代理的10%
        </el-descriptions-item>
        <el-descriptions-item label="推荐高级代理奖励" >
          <template #label>
            推荐高级代理奖励
          </template>
          3万 + 高级代理10% +标准代理的5%
        </el-descriptions-item>
        <el-descriptions-item label="推荐至尊代理奖励" >
          <template #label>
            推荐至尊代理奖励
          </template>
          8万
        </el-descriptions-item>
        <el-descriptions-item label="代理晋级" >
          <template #label>
           <span style="font-weight: bold; ">代理晋级</span>
          </template>
          推荐3个至尊代理成立分公司
        </el-descriptions-item>
      </el-descriptions>



    </el-form>
    <template #footer>
         <span class="dialog-footer">
           <el-button @click="closeEditDialog">关闭</el-button>
           <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
         </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import {ElMessage} from "element-plus";
import router from "@/router";
import {ProxyMechanism} from '@/apis/model/proxy/ProxyMechanismModel';
import {insertProxyMechanism, updateProxyMechanism} from '@/apis/http/proxy/ProxyMechanismHttp';
import {proxyMechanismCategoryPage} from "@/apis/http/proxy/ProxyMechanismCategoryHttp";
import {Params, Result} from "@/apis/model/common/common.interfaces";
import {ProxyMechanismCategory} from "@/apis/model/proxy/ProxyMechanismCategoryModel";

interface Prop {
  addOrEditVisible: boolean,
  ruleForm: ProxyMechanism,
  categoryList: ProxyMechanismCategory[],
  addDataType: string
}

// 刷新list页面
const refushList = ref(false);

// 传递过来的参数
const props = defineProps<Prop>();

const emit = defineEmits(["closeEditDialog"]);

// 关闭按钮
const closeEditDialog = () => {
  emit("closeEditDialog", {
    addOrEditVisible: !props.addOrEditVisible,
    refushList: refushList.value
  })
}
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  id: [
    {required: true, message: '请输入', trigger: 'blur'}
  ],
  proxyLevelTitle: [
    {required: true, message: '请输入代理等级名称', trigger: 'blur'}
  ],
  proxyMoney: [
    {required: true, message: '请输入代理费', trigger: 'blur'}
  ],
  bailMoeny: [
    {required: true, message: '请输入保证金', trigger: 'blur'}
  ],
  kf3Money: [
    {required: true, message: '请输入季度返现', trigger: 'blur'}
  ],
  kf6Money: [
    {required: true, message: '请输入半年度返现', trigger: 'blur'}
  ],
  kf12Money: [
    {required: true, message: '请输入年度返现', trigger: 'blur'}
  ],
  statusFlag: [
    {required: true, message: '请输入状态 0-停用 1-启用 2-备用', trigger: 'blur'}
  ],
  delFlag: [
    {required: true, message: '请输入是否删除 0-否 1-是', trigger: 'blur'}
  ],
  createUser: [
    {required: true, message: '请输入创建人', trigger: 'blur'}
  ],
  createTime: [
    {required: true, message: '请输入创建时间', trigger: 'blur'}
  ],
  updateTime: [
    {required: true, message: '请输入修改时间', trigger: 'blur'}
  ],
  remark: [
    {required: true, message: '请输入备注', trigger: 'blur'}
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 新增
      if (props.addDataType === 'add') {
        insertProxyMechanism(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '创建成功！',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          } else {
            ElMessage.error('创建失败！')
          }
        })
      } else if (props.addDataType === 'edit') {
        updateProxyMechanism(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '更新成功！',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          } else {
            ElMessage.error('更新失败！')
          }
        })
      }

    } else {
      ElMessage.error('请完善信息！')
    }
  })
}
</script>

<style scoped lang="less">
.dialog-footer button:first-child {
  margin-right: 10px;
}

::v-deep .el-descriptions__label {
  width: 200px;
}
</style>
